<template>
  <div id="home">
    <!-- 标题 -->
    <Navbar class="home-nav">
      <div slot="center">购物街</div>
    </Navbar>
    <!-- 选项卡(scroll里无法做吸顶效果) -->
    <TabControl
      v-show="isTabFixed"
      :class="{ TabControl: isTabFixed }"
      :titles="['流行', '新款', '精选']"
      ref="TabControl2"
      @click.native="tabClick(2)"
    />
    <!-- @scroll="scroll" -->
    <Scroll
      class="content"
      ref="scroll"
      :probeType="3"
      @scrollOn="scrollOn"
      pullUpLoad
      @pullingUp="pullingUp"
    >
      <!-- 轮播图 -->
      <HomeSwiper :banners="banners" />
      <!-- 推荐 -->
      <HomeRecommend :recommends="recommends" />
      <!-- 每周流行 -->
      <HomeFeature />
      <!-- 选项卡 -->
      <TabControl
        :titles="['流行', '新款', '精选']"
        ref="TabControl"
        @click.native="tabClick"
      />
      <!-- 商品列表 -->
      <GoodsList :goods="showGoods" />
    </Scroll>
    <!-- 返回顶部 -->
    <BackTop class="BackTop" @click.native="backTop" v-show="isBackTop" />
  </div>
</template>

<script>
// api
import { getHomeMultiData, getHomeGoods } from "api/home";
// 公共组件
import Navbar from "components/common/navbar/NavBar";
import TabControl from "components/content/tabcontrol/TabControl";
import GoodsList from "components/content/goods/GoodsList";
import Scroll from "components/common/scroll/Scroll";
import BackTop from "components/common/backTop/BackTop";
// 子组件
import HomeSwiper from "./childComps/HomeSwiper";
import HomeRecommend from "./childComps/HomeRecommend";
import HomeFeature from "./childComps/HomeFeature";

export default {
  data() {
    return {
      banners: [], //banner数据
      recommends: [], //推荐数据
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      }, //商品数据
      currentType: "pop", //选择的栏目
      isBackTop: false, //返回按钮是否显示
      tabOffsetTop: 1000, //选择卡距离顶部的高度
      isTabFixed: false, //选择卡是否添加吸顶效果（css样式）
    };
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType].list;
    },
  },
  components: {
    Navbar,
    HomeSwiper,
    HomeRecommend,
    HomeFeature,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,
  },
  created() {
    (async () => {
      await this.getHomeMultiData(); // 请求banner和推荐数据
      await this.getHomeGoods("pop", 1); // 请求商品数据
      await this.getHomeGoods("new", 1); // 请求商品数据
      await this.getHomeGoods("sell", 1); // 请求商品数据
    })().then(() => {
      this.$refs.scroll.scroll.refresh();
      this.$nextTick(() => {
        this.tabOffsetTop = this.$refs.TabControl.$el.offsetTop; //获取tab距离顶部高度（吸顶效果）
        console.log("this.tabOffsetTop", this.tabOffsetTop);
      });
    });
  },
  mounted() {},
  methods: {
    // 增
    // 删
    // 改
    // 查
    // 获取头部banner等信息
    async getHomeMultiData() {
      await getHomeMultiData().then((res) => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    // 获取商品信息
    async getHomeGoods(type, page) {
      await getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page = res.data.page;
        console.log("goods", this.goods.new.list);
      });
    },
    // 事件
    tabClick(id) {
      // 判断是外层还是内层选择卡被点击
      let index;
      if (id == 2) {
        index = this.$refs.TabControl2.currentIndex;
        this.$refs.TabControl.currentIndex = index;
      } else {
        index = this.$refs.TabControl.currentIndex;
        this.$refs.TabControl2.currentIndex = index;
      }
      // showGoods根据currentType来显示商品
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
    },
    backTop() {
      // console.log("点击返回顶部了");
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    // 监听scroll滚动（子组件事件）
    scrollOn(res) {
      // 判断backTop是否显示
      this.isBackTop = res < -2000;
      // 判断tabControl是否吸顶
      this.isTabFixed = res < -this.tabOffsetTop;
    },
    // 监听到底部
    pullingUp() {
      const page = this.goods[this.currentType].page + 1;
      // this.getHomeGoods(this.currentType, page); // 请求商品数据
      this.getHomeGoods("pop", page); // 请求商品数据
      this.getHomeGoods("new", page); // 请求商品数据
      this.getHomeGoods("sell", page); // 请求商品数据
    },
  },
};
</script>

<style scoped>
#home {
  padding-top: 44px;
}
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
}
.TabControl {
  position: fixed;
  top: 44px;
  width: 100%;
  z-index: 1;
}
.content {
  height: calc(100vh - 93px);
  overflow: hidden;
}
.BackTop {
  position: fixed;
  right: 5px;
  bottom: 55px;
}
</style>
